<template>
	<view class="u-flex-col">
		<view class="m-list">
			<view class="m-item" v-for="(item,index) in list">
				<view class="u-flex u-row-between">
					<text class="font1">{{item.title}}</text>
					<text class="font2">{{item.money}}</text>
				</view>
				<view class="u-flex u-row-between">
					<text class="font3">有效期至 {{item.endTime}}</text>
					<text class="font4">满{{item.man}}元可用</text>
				</view>
				<view class="m-coupon"></view>
				<view class="u-flex u-row-between u-m-t-16">
					<view class="u-flex" @click="detail_fun(item)">
						<text class="font3 u-m-r-6" style="color: #33302D;">使用规则</text>
						<image src="../static/coupon/down.png" v-if="item.is_show" class="img" mode=""></image>
						<image src="../static/coupon/up.png" v-else class="img" mode=""></image>
					</view>
					<view class="u-flex">
						<text class="m-coupon-price">{{item.jifen}}</text>
						<text class="m-coupon-price__unit">积分</text>
						<text class="btn" v-if="item.if_ke_lingqu == 1" @click="lingquPreFun(item)">立即兑换</text>
						<text class="btn btn-extend1" v-else>已兑完</text>
					</view>
				</view>
				<view class="m-text u-m-t-20" :class="{'hidden':!item.is_show}">
					<text>{{item.content || ''}}</text>
				</view>
			</view>
			<!-- <uni-load-more :status="status_load"></uni-load-more> -->
		</view>

		<u-popup v-model="show" mode="center" :borderRadius="20">
			<view class="m-popup">
				<view class="m-popup-title">
					<text>确定要兑换吗？</text>
				</view>
				<view class="m-popup-content">
					<text>兑换将消耗{{itemInfo.jifen}}积分哦~</text>
				</view>
				<view class="m-popup-bottom">
					<view class="m-popup-btn" @click="show = false">
						<text>暂不兑换</text>
					</view>
					<view class="m-popup-btn m-popup-btn__extend" @click="lingquFun(itemInfo)">
						<text>确定兑换</text>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabIndex: 1,
				show: false,
				itemInfo:{},
				
				status_load: 'more',
				list: [],
				params: {
					type: 3,
					page: 1,
					pagenum: 50,
				},
			};
		},
		onReachBottom() {
			if (this.status_load == 'noMore') {
				return false;
			}
			this.get_list()
		},
		onShow() {
			this.params.page = 1
			this.get_list()
		},
		methods: {
			lingquPreFun(item){
				this.itemInfo = item
				this.show = true
			},
			lingquFun(item){
				uni.showLoading({
					title:'兑换中...',
					mask:true
				})
				this.$http.getJson('users_yhqLingqu',{id:item.id}).then(res=>{
					this.$m.msg(res.message)
					uni.hideLoading()
					if(res.code == 1){
						this.show = false
						this.get_list()
					}
				})
			},
			detail_fun(item) {
				item['is_show'] = !item['is_show']
			},
			get_list() {
				this.status_load = 'loading'
				// this.params.channel_id = this.type_child_id
				let params = this.params
				this.$http.getJson('users_yhqList', params).then(res => {
					console.log(res);
					uni.hideLoading()
					let data = res.data
					data.forEach((item, index) => {
						data[index]['is_show'] = false
					})
					this.list = data
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f4f4f4;
	}

	.m-tab {
		display: flex;
		width: 750rpx;
		height: 100rpx;
		background-color: #fff;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
		border-bottom: 1px solid #EEEEEE;

		.m-tab-item {
			display: flex;
			height: 100%;
			flex: 1;
			font-size: 28rpx;
			color: #76706B;
			justify-content: center;
			align-items: center;
			position: relative;
		}

		.m-tab-item-active {
			color: #33302D;

			&::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translate(-42rpx);
				width: 84rpx;
				height: 4rpx;
				background: #D3A358;
			}
		}
	}

	.m-list {
		display: flex;
		flex-direction: column;

		// margin: 120rpx 30rpx 20rpx 30rpx;
		.m-item {
			display: flex;
			flex-direction: column;
			padding: 30rpx;
			background: #fff;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
		}
	}

	.font1 {
		font-size: 28rpx;
		color: #33302D;
		font-weight: 800;
	}

	.font2 {
		font-size: 48rpx;
		color: #D3A358;

		&::before {
			content: '￥';
			font-size: 30rpx;
		}
	}

	.font3 {
		font-size: 24rpx;
		color: #9B958F;
	}

	.font4 {
		font-size: 24rpx;
		color: #9B958F;
	}

	.m-coupon {
		height: 1px;
		border-bottom: 1px #EEEEEE dashed;
		margin-top: 22rpx;
		position: relative;
		// &::before{
		// 	content: '';
		// 	position: absolute;
		// 	width: 10rpx;
		// 	height: 20rpx;
		// 	border-top-right-radius: 10rpx;
		// 	border-bottom-right-radius: 10rpx;
		// 	background: #f4f4f4;
		// 	left: -30rpx;
		// 	top: -10rpx;
		// }
		// &::after{
		// 	content: '';
		// 	position: absolute;
		// 	width: 10rpx;
		// 	height: 20rpx;
		// 	border-top-left-radius: 10rpx;
		// 	border-bottom-left-radius: 10rpx;
		// 	background: #f4f4f4;
		// 	right: -30rpx;
		// 	top: -10rpx;
		// }
	}

	.m-coupon-price {
		font-size: 40rpx;
		color: #DE2C38;
	}

	.m-coupon-price__unit {
		font-size: 24rpx;
		color: #34302D;
		margin-left: 4rpx;
		margin-right: 30rpx;
	}

	.img {
		width: 16rpx;
		height: 8rpx;
	}

	.btn {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 143rpx;
		height: 48rpx;
		background: linear-gradient(180deg, #E4C89A 0%, #D3A358 100%);
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		font-size: 24rpx;
		color: #fff;
	}

	.btn-extend1 {
		background: #BDBDBD;
	}

	.btn-extend2 {
		background: #FFA200;
	}

	.m-text {
		transition: all 0.3;
		font-size: 24rpx;
		color: #9B958F;
	}

	.hidden {
		display: none;
		height: 0;
		opacity: 0;
	}

	.m-popup {
		width: 660rpx;
		height: 334rpx;

		.m-popup-title {
			font-size: 38rpx;
			color: #33302D;
			font-weight: 800;
			line-height: 53rpx;
			text-align: center;
			padding-top: 50rpx;
		}

		.m-popup-content {
			font-size: 28rpx;
			color: #33302D;
			text-align: center;
			margin-top: 25rpx;
		}

		.m-popup-bottom {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 50rpx;

			.m-popup-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 284rpx;
				height: 75rpx;
				background: #FFFFFF;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				border: 1px solid #E6E2DE;
				font-size: 26rpx;
				color: #9B958F;
				margin: 0 8rpx;
			}

			.m-popup-btn__extend {
				border-color: #D3A358;
				background: #D3A358;
				color: #fff;
			}
		}
	}
</style>